<template>
    <div>
        <h3 class="dialog-plate-title"><span>标签筛选</span></h3>
        <el-checkbox-group v-model="selectTags">
            <el-checkbox v-for="item in tagList" :label="item.id" :key="item.id">
                <el-tag v-for="tag in tagType" :key="tag.name" :type="tag.color" v-if="tag.value==item.type"> {{item.name}}</el-tag>
            </el-checkbox>
            <el-button @click="searchLiterature()" type="success">筛选</el-button>
        </el-checkbox-group>
        <el-table :data="literatureList" :highlight-current-row="true" height="400px" stripe border class="table-index"  style="width: 100%;"  :header-cell-style="getRowClass" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="code" label="文献编码" show-overflow-tooltip sortable min-width="100" align="center"></el-table-column>
            <el-table-column prop="docName" label="文献名称" show-overflow-tooltip sortable min-width="100" align="center"></el-table-column>
            <el-table-column prop="docType" label="文献类型" show-overflow-tooltip	sortable min-width="100" align="center"></el-table-column>
            <el-table-column prop="publications" label="发表刊物" show-overflow-tooltip	sortable min-width="100" align="center"></el-table-column>
            <el-table-column prop="publisher" label="发表人" show-overflow-tooltip	 sortable min-width="90" align="center"></el-table-column>
            <el-table-column prop="publishTime" label="发表时间" sortable min-width="120" align="center"></el-table-column>
            <el-table-column prop="creatorName" label=" 上传人" show-overflow-tooltip sortable  min-width="90" align="center"></el-table-column>
            <el-table-column prop="createTime" label="上传时间" sortable min-width="120" align="center"></el-table-column>
        </el-table>
        <el-button @click="addRelation()" type="success" style="margin:16px 0;">点击关联选中文献</el-button>
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="pagination.currentPage" :page-sizes="[5,10, 15,20, 25,30,50, 100]" :page-size="pagination.pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"></el-pagination>
    </div>
</template>
<script>
import api from '@/axios/api.js'
export default {
    name:"relationLiterature",
    props: {
        id:Number,
        aid:Number,
        relationList:Array
    },
    data (){
        return {
            literatureList:[],
            selectLiterature:[],
            tagList:[],
            selectTags:[],
             tagType:[{
                value:'1',
                text:'疾病类型',
                color:'info',
            },
            {
                value:'2',
                text:'科室',
                color:'sucess',
            },
            {
                value:'3',
                text:'非pe',
                color:'warning',
            },
            {
                value:'4',
                text:'pe',
                color:'danger'

            }],
            pagination:{
                pageSize:10,
                currentPage:1,
                total:0
            }
        }
    },
    watch: {
        relationList(newValue,oldValue){
             this.getLiteratureList();
             this.getTagList();
        }
    },
    created (){
        this.getLiteratureList();
        this.getTagList();
    },
    methods:{
        getLiteratureList(){/**获取文献列表 */
            let self = this;
            let data={
                labels:self.selectTags,
                pageSize:self.pagination.pageSize,
                currentPage:self.pagination.currentPage
            };
            self.literatureList=[];
            api.literatureListByLabels(data).then(res=>{
                if(res.content.records&&res.content.records.length>0){
                    res.content.records.forEach(element => {
                        element.level= Number(element.level);
                        let isFlag = false;
                           for(let i=0;i<self.relationList.length;i++){
                               if(self.relationList[i].id==element.id){
                                   isFlag = true;
                               }
                           }
                           if(!isFlag){
                               self.literatureList.push(element);
                           }
                    });
                }
                self.pagination.total =  res.content.total;
            })
        },
        handleSizeChange(size){
           this.pagination.currentPage=1;
           this.pagination.pageSize=size;
           this.getLiteratureList();
        },
        handleCurrentChange(currentPage){
            this.pagination.currentPage = currentPage;
            this.getLiteratureList();
        },
        handleSelectionChange(val){
             this.selectLiterature = val;
        },
        getTagList(){
            let self =this;
            api.tagList().then(res=>{
               self.tagList=res.content;
            })
        },
        searchLiterature(){
            this.pagination.currentPage = 1;
           this.getLiteratureList();
        },
        addRelation(){/**点击关联选中文献 */
           let self  =this;
            if(self.selectLiterature.length>0){
                let data=[];
                self.selectLiterature.forEach(el => {
                    data.push({
                        aid:self.aid,
                        did:el.id
                    })
                });
                api.contentAbstractInfo(data).then(res=>{
                     self.$message.success("文献关联成功！");
                     self.$emit('relationSuccess',true)
                },error=>{
                    self.$message.error("文献关联失败！");
                })
            }else{
                 self.$message.error("请至少选择一个文献");
            }
        }
    }
}
</script>
<style scoped>
.dialog-plate-title{
    margin-bottom:16px;
}
</style>

